<!DOCTYPE html>
<html lang="UTF-8" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keys" content="">
    <meta name="author" content="">
	<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/login.css">
	<style>

	</style>
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <div><a class="navbar-brand" href="index.html" style="font-size:32px;">尚筹网-创意产品众筹平台</a></div>
        </div>
      </div>
    </nav>

    <div class="container">

      <form class="form-signin" role="form" th:action="@{/member/manager/register}">
        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-log-in"></i> 用户注册</h2>
		  <div class="form-group has-success has-feedback">
			<input name="loginacct" type="text" class="form-control" id="loginacct" placeholder="请输入登录账号" autofocus>
			<span class="glyphicon glyphicon-user form-control-feedback"></span>
		  </div>
		  <div class="form-group has-success has-feedback">
			<input name="userpswd" type="text" class="form-control" id="userpswd" placeholder="请输入登录密码" style="margin-top:10px;">
			<span class="glyphicon glyphicon-lock form-control-feedback"></span>
		  </div>
		  <div class="form-group has-success has-feedback">
			<input name="phoneNum" type="text" class="form-control" id="phoneNum" placeholder="请输入手机号" style="margin-top:10px;">
			<span class="glyphicon glyphicon glyphicon-envelope form-control-feedback"></span>
		  </div>

          <div class="form-group has-success has-feedback">
              <input name="randomCode" type="text" class="form-control" id="randomCode" placeholder="请输入验证码" style="margin-top:10px;">
              <span class="glyphicon glyphicon-copyright-mark form-control-feedback"></span>
          </div>
          <div class="form-group has-success has-feedback">
              <button id="randomCodeBtn" class="btn btn-success">发送验证码<button>
          </div>
<!--        <a class="btn btn-lg btn-success btn-block" href="member.html" > 注册</a>-->
            <input type="submit" value="注册" class="btn btn-lg btn-success btn-block">
      </form>
    </div>
    <script src="/jquery/jquery-2.1.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
  <script>
      var sec=5;//记录剩余秒数
      var isStop=0;//定时器的登录状态
      $(function () {
          $("#randomCodeBtn").click(function () {
              //验证手机号
              var phoneNum=$('#phoneNum').val();
              if(phoneNum.length==0){
                  alert('手机号不能为空');
                  return;
              }
              //禁用权限
              $('#randomCodeBtn').attr("disabled",true);
              //启动定时器
              isStop=setInterval("time()",1000);
              //发送请求
              $.getJSON("/member/manager/send/code",{phoneNum:phoneNum},function (resultEntity) {
                  if(resultEntity.result=="SUCCESS"){
                      alert('验证码发送成功，请查收');
                  }else{
                      alert(resultEntity.message);
                  }
              })
          });
      });
      function time() {
          if(sec>0){
              sec--;
              $('#randomCodeBtn').text(sec+'s后，从新发送');
          }else{
              sec=5;
              $('#randomCodeBtn').attr("disabled",false);
              $('#randomCodeBtn').text('从新发送');
              clearInterval(isStop);
          }
      }
  </script>
  </body>
</html>